<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>智能家居环境测控平台</title>
    <link href="/static/bootstrap.min.css" rel="stylesheet">
    <link href="/static/dashboard.css" rel="stylesheet">
    <link href="/static/bootstrap-slider.min.css" rel="stylesheet">
    <link href="/static/bootstrap-datetimepicker.min.css" rel="stylesheet">
  </head>

  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <ul class="nav navbar-nav navbar-right" style="right: 15px; position: fixed">
            <li><a href="#" id="settingsbtn" class="settingpanelbtn">设置</a></li>
          </ul>
          <a class="navbar-brand" href="#">环境监测</a>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#" id="viewtitle1">仪表盘 <span class="sr-only">(current)</span></a></li>
            <li><a href="#" id="temperaturepointer"> 温度</a></li>
            <li><a href="#" id="sunlightpointer"> 光照</a></li>
            <li><a href="#" id="flamepointer"> 火焰</a></li>
            <li><a href="#" id="gasespointer"> 空气</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="">历史数据</a></li>
            <li><a href="#"> 温度</a></li>
            <li><a href="#"> 光照</a></li>
            <li><a href="#"> 火焰</a></li>
            <li><a href="#"> 空气</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="#">关于</a></li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header" id="viewtitle2">仪表盘</h1>
          <div class="row placeholders">
            <div class="col-md-3 col-xs-6" id="temperaturediv">
              <canvas id="temperature" height="150" width="150"></canvas>
              <h4>温度</h4>
            </div>
            <div class="col-md-3 col-xs-6" id="sunlightdiv">
              <canvas id="sunlight" height="150" width="150"></canvas>
              <h4>光照</h4>
            </div>
            <div class="col-md-3 col-xs-6" id="flamediv">
              <canvas id="flame" height="150" width="150"></canvas>
              <h4>火焰</h4>
            </div>
            <div class="col-md-3 col-xs-6" id="gasesdiv">
              <canvas id="gases" height="150" width="150"></canvas>
              <h4>空气</h4>
            </div>
          </div>
          <div class="alert alert-success popdiv" role="alert" id="hsa">附近没有人。</div>

          <h2 class="sub-header">历史数据</h2>
          <div class="table-responsive">
            <table class="table table-striped" id="datatable">
              <thead>
                <tr>
                  <th>时间</th>
                  <th>温度</th>
                  <th>光照</th>
                  <th>火焰</th>
                  <th>空气</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
          <button id="refreshtable">刷新表格数据</button>

          <h2 class="sub-header">关于这个项目</h2>
          <div>
            <h4 class="h4">这个项目使用过的开源组件:</h4>
            <ul>
              <li><p><mark>Bootstrap--v3</mark>    作者: Twitter Inc.</p></li>
              <li><p><mark>jQuery--v2.2.0</mark>    作者: jQuery Foundation</p></li>
              <li><p><mark>Chart.js--v2.0 beta</mark>    作者: Nick Downie</p></li>
              <li><p><mark>Dynamics.js</mark>    作者: Michael Villar</p></li>
            </ul>
            <h4 class="h4">开发者</h4>
            <ul>
              <li><p>黄琼海: 策划</p></li>
              <li><p>岑发亮: 硬件开发</p></li>
              <li><p>刘柏麟: 服务端和前端开发</p></li>
            </ul>
            <p>特别感谢<strong>王子勤</strong>为这个项目开发的Arduino Communication Library程序库.</p>
          </div>
        </div>
      </div>
    </div>
    <nav class="popovernav">
      <ul class="popoverul">
        <li class="popoverli"><a href="#" id="switchview">切换到图表</a></li>
        <li class="popoverli" style="color: white">更改刷新频率:</li>
        <li class="popoverli" style="padding-left: 15px"><input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="0.5" data-slider-value="2" style="width: 145px"/></li>
        <li class="popoverli"><a href="#" id="pausedownload">暂停下载数据</a></li>
        <li class="popoverli"><a href="#" id="pauserefresh">暂停刷新数据</a></li>
        <li class="popoverli"><a href="#" data-toggle="modal" data-target="#myModal">查看历史记录</a></li>
        <li class="popoverli"><a href="#" id="displayhsa">隐藏人类传感器状态</a></li>
      </ul>
    </nav>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">选择日期</h4>
          </div>
          <div class="modal-body">
            <div id="datetimepicker" style="padding-left: 25px"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存更改</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/jquery.min.js"></script>
    <script src="/static/bootstrap.min.js"></script>
    
    <script src="/static/dynamics.min.js"></script>
    <script src="/static/Chart.min.js"></script>
    <script src="/static/bootstrap-slider.min.js"></script>
    <script src="/static/bootstrap-datetimepicker.min.js"></script>
    <script src="/static/main.js"></script>
  

</body></html>